<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../images/huanghelou.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jQuery3.6.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <script src="../js/swiper-bundle.min.js"></script>
    <!-- 通用css -->
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/culture.css">
    <title>黄鹤楼文化</title>
</head>

<body>
    <!--头部start-->
    <header>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <a href="#"><img src="../images/logo.png" alt=""></a>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-8">
                    <div class="row">
                        <div class=".weather">
                            <ul class="list-unstyled list-inline">
                                <li>武汉</li>
                                <li><a href="#"><img src="" alt=""></a></li>
                                <li>9~12&#8451;>></li>                          
                                <li>中文/</li>
                                <li>EN/</li>
                                <li>FR</li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <nav class="mynav navbar navbar-static-top">
                            <div class="container-fluid">
                                <div class="navbar-header">
                                    <!--超小时 品牌和最右边的按钮-->
                                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                        data-target="#lk_nav" aria-expanded="false">
                                        <span class="sr-only"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                </div>
                                <div class="collapse navbar-collapse" id="lk_nav">
                                    <ul class="nav navbar-nav" id="Navigation">
                                        <li>
                                            <a href="index.html" class="active">首页</a>
                                        </li>

                                        <li>
                                            <a href="#">走进黄鹤楼</a>

                                        </li>
                                        <li>
                                            <a href="javascript:;">黄鹤楼文化</a>

                                        </li>
                                        <li>
                                            <a href="video.html">黄鹤楼精彩影像</a>

                                        </li>
                                        <li>
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">公众平台
                                                <span class="caret"></span>
                                            </a>
                                           <ul class="dropdown-menu">
                                               <li><a href="#"> 景区公告</a></li>
                                               <li><a href="survey.html"> 满意度调查</a></li>
                                           </ul>

                                        </li>
                                        <li>
                                            <a href="#">旅游服务</a>

                                        </li>
                                    </ul>
                                </div>                               
                            </div>                          
                        </nav>
                    </div>
                </div>
            </div>
    </header>
    <!--头部end-->
    <!-- swiper start -->
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../images/clutre.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../images/clutre2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../images/clutre3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../images/clutre4.jpg" alt=""></div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!--滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <script>        
        var mySwiper = new Swiper ('.swiper', {
          direction: 'horizontal', // 垂直切换选项
          loop: true, // 循环模式选项
          effect : 'cube',//立体
          cubeEffect: {//立体切换的属性
            slideShadows: false,//关闭阴影
          },
          autoplay:true,//自动切换     // 分页器
          pagination: {
            el: '.swiper-pagination',
          },    
          // 前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },        
          //滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
            snapOnRelease: false,
          },
        })        
        </script>
    <!-- swiper end -->
    <div class="mycontent">
        <div class="content1">
            <div class="text-center">
                <h1>
                    <img src="../images/yun1.png" />
                    诗歌
                    <img src="../images/yun2.png" alt="">
                </h1>
            </div>
            <div class="container text-center">
                <div class="row">
                    <div class="col-sm-4">
                        <h3>《黄鹤楼》唐  崔颢</h3>
                        <p>昔人已乘白云去，此地空余黄鹤楼。</p>
                        <p>黄鹤一去不复返，白云千载空悠悠。</p>
                        <p>    晴川历历汉阳树，芳草萋萋鹦鹉洲。</p>
                        <p>日暮乡关何处是，烟波江上使人愁。</p>
    
                    </div>
                    <div class="col-sm-4">
                        <h3>《望黄鹤楼》唐 李白 </h3>
                        <p>东望黄鹤山，雄雄半空出。</p>
                        <p>四面生白云，中峰倚红日。</p>
                        <p>岩峦行穹跨，峰嶂亦冥密。</p>
                        <p>颇闻列仙人，于此学飞术。</p>
                    </div>
                    <div class="col-sm-4">
                        <h3>《黄鹤楼送孟浩然之广陵》唐 李白</h3>
                        <p>故人西辞黄鹤楼，</p>
                        <p>烟花三月下扬州。</p>
                        <p>孤帆远影碧空尽，</p>
                        <p>唯见长江天际流。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pt_content2">
        <!--图集-->
        <div class="text-center">
            <h1>
                <img src="../images/yun1.png" />
                文件气息浓郁
                <img src="../images/yun2.png" alt="">
            </h1>
        </div>
        <div class="container-fluid text-center">
            <div class="row">
                <div class="col-md-3">
                    <img src="../images/cu1.jpg" style="height: 30rem;" />
                </div>
                <div class="col-md-3">
                    <img src="../images/cu2.jpg" style="height: 30rem;" />
                </div>
                <div class="col-md-3">
                    <img src="../images/内部1.jpeg" />
                </div>
                <div class="col-md-3">
                    <img src="../images/九重天.jpg" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <img src="../images/人杰图.jpg" />
                </div>
                <div class="col-md-3">
                    <img src="../images/内部2.jpeg" height="250rem" />
                </div>
                <div class="col-md-3">
                    <img src="../images/塔.jpeg" />
                </div>
                <div class="col-md-3">
                    <img src="../images/内部3.jpeg" />
                </div>
            </div>
            <script>
                $(()=>{
                    //鼠标进入的时候，其他的li标签透明度：0.5
                    $(".row .col-md-3").hover(function(){
                        $(this).siblings().stop().fadeTo(400,0.33)
                    },function(){
                        //鼠标离开的时候，其他的li标签透明度改为：1
                        $(this).siblings().stop().fadeTo(400,1)
                    }) 
                })
            </script>
        </div>
    </div>
    <div class="deeds">
        <div class="row">
            <div class="container">
                <span>黄鹤楼历史</span>
                <ul class="nav nav-pills nav-info">
                    <li class="active"><a href="#deeds1" data-toggle="tab">三国时期</a></li>
                    <li><a href="#deeds2" data-toggle="tab">南北朝</a></li>
                    <li><a href="#deeds3" data-toggle="tab">明代</a></li>
                </ul><br>
                <div class="tab-content">
                    <div class="tab-pane media active" id="deeds1">
                        <a class="media-left" href="#">
                            <img src="../images/deeds1.png" alt="">
                        </a>
                        <div class="media-body">
                            <strong>吴黄武二年(公元223年)</strong>
                            <p>孙权修筑夏口城，城“西南角因矶为楼，名黄鹤楼”。</p>
                        </div>
                    </div>
                    <div class="tab-pane media" id="deeds2">
                        <a class="media-left" href="#">
                            <img src="../images/deeds2.jpg" alt="">
                        </a>
                        <div class="media-body">
                            <strong>淳熙十三年(公元1186年)</strong>
                            <p>
                                姜夔作《翠楼吟·武昌安远楼成》词，记述了登临安远楼(南楼)时的伤感情怀。该词谱曲后，立即在武昌传唱开来，而且历久不衰，堪称宋词中吟诵南楼的佳作。
                            </p>
                            <strong>绍兴年间(公元1131～1162年)</strong>
                            <p>

                                游仪作《登黄鹤楼》诗。该诗脍炙人口，被誉为“宋诗绝唱”。游默斋曾书之于南楼，后又为之刻石立碑。
                            </p>
                        </div>
                    </div>
                    <div class="tab-pane meadia" id="deeds3">
                        <a class="media-left" href="javascript:;">
                            <img src="../images/deeds3.png" alt="">
                        </a>
                        <div class="media-body">
                            <strong>万历二十四年(公元1596年)</strong>
                            <p>
                                武昌新任知府孙承荣辑、任家相补辑的明刻《黄鹤楼集》，由武昌府署刊刻，分三卷，集历代黄鹤楼诗文210家，近400篇，是研究黄鹤楼的重要史料来源之一。明初及正德年间曾各有过黄鹤楼诗集，但均已散失。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
     
    <!-- footer start -->
    <div class="tail">
        <footer class="footer container ">
            <div class="mod_help row">
                <div class="col-md-3 col-xs-6">
                    <dl>
                        <dt>走进黄鹤楼</dt>
                        <dd><a href="#">黄鹤楼介绍</a></dd>
                        <dd><a href="#">景点预览</a></dd>                   
                    </dl>
                </div>
                <div class="col-md-3 col-xs-6">
                    <dl>
                        <dt>新闻资讯</dt>
                        <dd><a href="#">最新活动</a></dd>
                        <dd><a href="#">热点关注</a></dd>
                        <dd><a href="#">精彩推荐</a></dd>
                        <dd><a href="#">景区动态</a></dd>
                        <dd><a href="#">媒体聚焦</a></dd>
                    </dl>
                </div>
                <div class="col-md-3 col-xs-6">
                    <dl>
                        <dt>黄鹤楼文化</dt>
                        <dd><a href="#">黄鹤楼传说</a></dd>
                        <dd><a href="#">黄鹤楼诗词</a></dd>
                        <dd><a href="#">名人书画</a></dd>
                        <dd><a href="#">藏品精粹</a></dd>
                        <dd><a href="#">文物保护</a></dd>
                    </dl>
                </div>
                <div class="col-md-3 col-xs-6">
                    <dl>
                        <dt>公众平台</dt>
                        <dd><a href="#">投诉建议</a></dd>
                        <dd><a href="#">景区公告</a></dd>
                        <dd><a href="#">满意度调查</a></dd>
                        <dd><a href="#">联系我们</a></dd>
                    </dl>
                </div>
            </div>
            <!-- 版权信息模块 -->
            <div class="mod_copyright row">
                <div class="links">
                    <a href="#">湖北省文化和旅游厅</a> | <a href="#"> 武汉市园林和林业局</a> | 武汉市文化和旅游局 | 武汉东湖 | 携程| 武汉天河国际机场 | 岳阳楼 |
                    销售联盟 | 滕王阁
                    | 天一阁 |
                </div>
                <div class="copyright">
                    中国&nbsp;&nbsp;武汉&nbsp;&nbsp;黄鹤楼
                </div>
            </div>
        </footer>
    </div>
    <!-- footer end -->
</body>

</html>